import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Image,ScrollView } from 'react-native';
import PropTypes from 'prop-types';
import Modal from 'react-native-modal';
import ValueInput from './ValueInput';

const InputModal = ({
  isVisible,
  modelName,
  title,
  placeholder,
  unit,
  style,
  getRef,
  onCancle,
  onSave,
  ...rest
}) => {
  //   const passRef = ref => {
  //     if (getRef) {
  //       getRef(ref);
  //     }
  //   };

  const [inputStr, setInputStr] = useState();
  const [selIndex, setSelIndex] = useState(0);

  const renderUpdateItem = ({ item, index }) => (
    <TouchableOpacity key={index} style={{ height: 40, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row' }}
      onPress={() => {
        setSelIndex(index)
      }}
    >
      <Text style={{ color: index == selIndex ? '#060606' : '#515151', fontSize: 16, fontFamily: 'Moldiv',textAlign:'right',width:'60%' }}>{item}</Text>
      <Image
        source={index == selIndex ? require('../images/icon_sselyes.png') : require('../images/icon_sselno.png')}
        style={{ height: 21, width: 21 }}
      />
    </TouchableOpacity>
  );

  return (
    <Modal
      isVisible={isVisible}
      style={{
        // alignItems: 'center',
        // justifyContent: 'center',
      }}>
      <View
        style={{
          width: '100%',
          backgroundColor: '#DDDDDD',
          // borderRadius: 14, 
          alignItems: 'center',
        }}>

        <Image
          source={require('../images/icon_reset.png')}
          style={{ marginTop: 40, height: 60, width: 60 }}
        />
        <Text style={{ marginTop: 10, color: '#060606', fontSize: 16, fontFamily: 'Moldiv', lineHeight: 30, fontWeight: '500', textAlign: 'center' }}>
          Confirm Factory Setting Restore
        </Text>
        <Text style={{ marginTop: 10, color: '#060606', fontSize: 16, fontFamily: 'Moldiv', lineHeight: 30, fontWeight: '500', textAlign: 'center' }}>
          The model is:<Text style={{ color: 'red' }}>{modelName}</Text>
        </Text>
        <Text style={{ marginTop: 10, color: '#060606', fontSize: 16, fontFamily: 'Moldiv', fontWeight: '500', textAlign: 'center' }}>
          Are you sure to restore the factory settings?
        </Text>
        <View
          style={{
            margin: 20,
            height: 44,
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}>
          <TouchableOpacity
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
              borderColor: '#000000',
              borderWidth: 1,
              marginRight: 10
            }}
            onPress={() => onSave(selIndex)}>
            <Text style={{ color: '#060606', fontSize: 16, fontFamily: 'Moldiv', fontWeight: '500' }}>Confirm</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#CFFF36' }}
            onPress={onCancle}>
            <Text style={{ color: '#060606', fontSize: 16, fontFamily: 'Moldiv', fontWeight: '500' }}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

InputModal.defaultProps = {
  label: 'placeholder',
  unit: '',
};

InputModal.propTypes = {
  label: PropTypes.string,
  unit: PropTypes.string,
};

export default InputModal;
